<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<link rel="stylesheet" th:href="@{/layui/css/layui.css}">
<script  th:src="@{/js/jquery-1.11.3.min.js}"></script>
<script  th:src="@{/layui/layui.js}"></script>
<script  th:src="@{/js/util.js}"></script>
<script  type="text/javascript" th:src="@{/js/wangEditor.min.js}"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>


<body>


<form class="layui-form" action="" id="goodsForm">


            <input  type="hidden" name="gno"   class="layui-input" th:value="${goods.gno}">

    <div style="display: flex">
        <div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品标题</label>
                <div class="layui-input-inline">
                    <input type="text" name="name"   class="layui-input" th:value="${goods.name}" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品价格</label>
                <div class="layui-input-inline">
                    <input type="text" name="price"   class="layui-input" th:value="${goods.price}" lay-verify="required|number">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品库存</label>
                <div class="layui-input-inline">
                    <input type="text" name="inventory" th:value="${goods.inventory}" class="layui-input" lay-verify="required|number">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-inline" style="padding-left: 30px">
                    <button type="button" class="layui-btn"  lay-submit lay-filter="goodsForm" >立即提交</button>
                </div>
            </div>
        </div>
        <div>

            <div class="layui-form-item">
                <label class="layui-form-label">商品类型</label>
                <div class="layui-input-inline">
                    <select  lay-filter="goodstype" id="goodstype" name="tno" >
                        <option th:value="${t.tno}" th:each="t:${alltype}" th:text="${t.name}"></option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品图片</label>
                <div class="layui-input-inline">
                    <img  style="width: 188px;height: 200px" id="previewImg" th:src="${goods.icon}">
                    <input type="file" name="pic" id="pic" style="display:none">
                </div>
            </div>

        </div>
        <div>
            <label style="text-align: center">商品详情</label>
            <div id="div1">
                <!--            <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>-->

            </div>

        </div>
        <input type="hidden" name="detail" id="detail"/>
    </div>

</form>

</body>
<script type="text/javascript" th:inline="javascript">

    $(function(){

        let g=[[${goods}]]


        var E = window.wangEditor;
        var editor = new E('#div1');
        editor.config.uploadImgShowBase64 =true;
        editor.config.uploadImgParamsWithUrl=true;
        // 或者 const editor = new E( document.getElementById('div1') )


        editor.create();

        editor.txt.html(g.detail);



        layui.use('form', function(){
            var form = layui.form;

            $("#previewImg").click(function(){
                $("#pic").click()

            })

            $("#pic").change(function (){
                let file=this.files[0];
                imgPreview(file,$("#previewImg")[0]);

            })

            form.on('submit(goodsForm)',function(data){

                let text=editor.txt.html();
                $("#detail").val(text);
                console.log(data.elem);
                console.log(data.form);
                console.log(data.field);


                let formData =new FormData(data.form);



                $.ajax({
                    url: '/seller/goods/update',
                    contentType: false,
                    data: formData,
                    dataType: 'json',
                    processData: false,
                    success: function(res){
                        if(res.res){
                            layer.msg(res.msg)
                        }
                    },

                    type: 'post',
                })


            })

            form.render();
        });
    })

    function imgPreview(file,imgDom){
        if (window.FileReader){
            var reader =new FileReader();
        }else{
            alert("设备不支持图片预览功能");
        }
        var imageType=/^image\//;
        if(!imageType.test(file.type)){
            alert("请选择图片");
            return;
        }
        reader.onload=function(e){

            imgDom.src=e.target.result;
        }
        reader.readAsDataURL(file);
    }


</script>

</html>